<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>老周爱dan</title>
    <link rel="stylesheet"  href="css/iconfont.css">
	<style type="text/css">
		.laozhou{
			border: 1px solid #ccc;
			width: 400px;
			height: 600px;
			min-height: 600px;
			margin: 0 auto; 
			border-radius: 10px 10px 0 0;
      background-color:#bad3f7; 
		}
		.chang{
			border-radius: 10px 10px 0 0;			
			background-color: #8eb9f5;
		    text-align: center;
		}
		.chang h2{
			margin: 0;
			height: 40px;
			line-height: 40px;
			color: #fff;
			position: relative;
		}
       .rer button{
       	margin: 10px 10px;
       	background-color:#61aaf7; 
       	height: 30px;
       	line-height: 30px;
       	color: #fff;
       	border-radius: 10px;
       }
        .rerq button{
        margin: 10px 10px;
        background-color:#61aaf7; 
        height: 30px;
        line-height: 30px;
        color: #fff;
        border-radius: 10px;
       } 
       .rert button{
        margin: 10px 10px;
        background-color:#61aaf7; 
        height: 30px;
        line-height: 30px;
        color: #fff;
        border-radius: 10px;
       }
	</style>
</head>
<body>
   <div class="laozhou">
   	 <div class="chang">   	 	
   	 	<h2><span id="aaa" class="iconfont icon-back" style="color: #0d0a31; float: left;"></span>请选择城市</h1>   	 	
   	 </div>
   	 <div class="rer">
   	 		 <button>广西壮族自治区</button>
   	 		 <button>广东</button>
   	 		 <button>湖南</button>
   	 		 <button>江西</button>
   	 </div>
   	 <div class="rerq" style="display: none;">
   	 		 <button>南宁市</button>
   	 		 <button>柳州市</button>
   	 		 <button>广州市</button>
   	 		 <button>深圳市</button>
   	 		 <button>长沙市</button>
   	 		 <button>张家界市</button>
   	 		 <button>南昌</button>
   	 		 <button>九江</button>
   	 </div>
   	 <div class="rert" style="display: none;">
   	 		 <button>青秀区</button>
   	 		 <button>琅东区</button>
   	 		 <button>城中区</button>
   	 		 <button>鱼峰区</button>
   	 		 <button>越秀区</button>
   	 		 <button>荔湾区</button>
   	 		 <button>福田区</button>
   	 		 <button>罗湖区</button>
   	 		 <button>城东区</button>
   	 		 <button>城南区</button>
   	 		 <button>永定区</button>
   	 		 <button>武陵源区</button>
   	 		 <button>东湖区</button>
   	 		 <button>西湖区</button>
   	 		 <button>浔阳区</button>
   	 		 <button>濂溪区</button>
   	 </div>
     
   </div>
   <script type="text/javascript" src="json/jquery3.js"></script>
   <script type="text/javascript">
  $('#aaa').click(function(){
   $('.rer').hide();

  })
  function shafg(but){
     var cid=$(but).val();
   console.log(cid);
   $('.rer').hide();
   $('.rerq').show();
    $('.rert').toggle(); 
   $.get('json/y.json',function(res){
    $('.rerq').empty();    
    $('.rert').empty();
    for (var i = 0; i < res.length; i++) {
      if(cid==res[i].pid){
      var but='<button  value="'+res[i].id+'">'+res[i].name+'</button>';
      $('.rert').append(but);
    }
    }
   })
  }
  function shafgag(but) {
   var pid=$(but).val();
   console.log(pid);
   $('.rer').hide();
   $('.rerq').show();
 
   $.get('json/u.json',function(res){
    $('.rerq').empty();
    for (var i = 0; i < res.length; i++) {
      if(pid==res[i].pid){
      var but='<button onclick="shafg(this)" value="'+res[i].id+'">'+res[i].name+'</button>';
      $('.rerq').append(but);
    }
    }
   })     
  }
  function qioqwi(){
     $('.rer').empty();
     $.get('json/d.json',function(res){
      for (var i = 0; i < res.length; i++) {
        var der="";
        der='<button onclick="shafgag(this)" value="'+res[i].id+'">'+res[i].name+'</button>';
     $('.rer').append(der);
      }
     })
  }

  qioqwi();
</script>
</body>
</html>